<template>
    <el-card class="card-order">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="order_no" label="Order_No" />
            <el-table-column label="Price" width="180" align="center">
                <template v-slot="{ row }">
                    <span>￥{{ Math.round(row.price) | filterData(row.price) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="Status" width="120" align="center">
                <template #default="{ row }">
                    <el-tag v-if="row.status === 'success'" type="success">{{ row.status }}</el-tag>
                    <el-tag v-else type="danger">{{ row.status }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
import { transactionList } from '@/api/remote-search'
export default {
    name: 'Order',
    data() {
        return {
            tableData: null
        }

    },
    mounted() {
        this.fetchData()
    },
    // 过滤器
    filters: {
        filterData(num) {
            return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
        }
    },
    methods: {
        // 数据格式
        /*  toThousandFilter(num) {
             return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
         }, */
        // 获取数据
        fetchData() {
            transactionList().then(result => {
                // console.log(result.data.items);
                this.tableData = result.data.items
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.card-order {
    height: 466px;
}
</style>